<template>
  <div class="app-container">
    <el-card class="pag-container">
      <div style="font-size: 14px;text-align: center; box-sizing: border-box;padding: 10px 40px 10px 40px;">
        <el-row>
          <el-col :span="14" :align="'left'">
            <!-- <span style="font-size: 14px;">{{ rowData.companyName }}</span> -->
            <a style="font-size: 17px;font-weight:500 ;">{{ rowData.companyName }}</a>
          </el-col>
          <el-col :span="10" :align="'right'">
            <!-- <el-button type="primary" link plain icon="ChatDotSquare" >联系客服</el-button> -->
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin:20px 0;">
          <el-col :offset="7" :span="4" :align="'right'">
            <span class="text-ellipsis" style="font-weight: bolder;font-size: 16px;display: block;max-width: 100%;text-align: center;">{{ rowData.carryCityName }}</span>
            <div style="margin-top: 5px;text-align: center;">
              出发城市
              <el-tooltip class="box-item" effect="dark" :content="rowData.carryCityName" placement="top"><el-icon style="top: 2px;"><QuestionFilled /></el-icon></el-tooltip>
            </div>
          </el-col>
          <el-col :span="2"><img style="text-align: center; width: 17px;" src="@/assets/icons/svg/right.svg"></el-col>
          <el-col :span="7" :align="'left'">
            <span class="text-ellipsis" style="font-weight: 800;font-size: 16px;display: block;max-width: 100%;">{{ rowData.returnCityName }}</span>
            <div style="margin-top: 5px;">
              到达城市
              <el-tooltip class="box-item" effect="dark" :content="rowData.returnCityName" placement="top"><el-icon style="top: 2px;"><QuestionFilled /></el-icon></el-tooltip>
            </div>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="6" style="position: relative;">
              <!-- <img :src="imgUrl" style="width: 100%;"/> -->
              <Carousel v-bind="swiperData" style="position: absolute;top: -70px;"></Carousel>
          </el-col>
          <el-col :span="12" style="padding:0 0 80px 0">
            <table style="font-size: 14px;width: 600px;margin-top: 40px; text-align: left;margin: auto;">
              <tbody>
              <tr>
                <td>箱使期</td>
                <td style="font-weight: 600;"> {{ rowData.boxUsagePeriod }} 天</td>
              </tr>
              <tr>
                <td>箱型</td>
                <td>
                  <el-radio-group v-model="param.boxType" @change="boxTypeChange" aria-readonly="true">
                    <el-radio-button v-for="item in param.boxTypeList" :label="item.label" :key="item"
                      :value="item.value" size="small"/>
                  </el-radio-group>
                </td>
              </tr>
              <tr>
                <td>箱况</td>
                <td>
                  <el-radio-group v-model="param.boxCondition" @change="param.num = 0">
                    <el-radio-button v-for="item in param.boxConditionList" :label="item.label" :key="item"
                      :value="item.value" size="small"/>
                  </el-radio-group>
                </td>
              </tr>
              <tr>
                <td style="width:80px; ">修箱费</td>
                <td><b>还箱时，实报实销</b></td>
              </tr>
              <tr>
                <td style="width:80px;">超期费</td>
                <td>
                    <span class="text-ellipsis" style="display: inline-block;max-width: 450px;height: 30px;line-height: 35px;">{{eltooltip}}</span>
                    <el-tooltip class="box-item" effect="dark" :content="eltooltip" placement="top" style="float: left;"><el-icon style="top:-5px"><QuestionFilled /></el-icon></el-tooltip>
                </td>
              </tr>
              <tr>
                <td style="width:80px; ">可回调箱量</td>
                <td> {{inventory}}个
                  <!-- <el-input-number v-model="param.num" :min="0" v-if="showBtn"/>
                  仅供参考，可超量下单，以联系集装箱公司为准 -->
                </td>
              </tr>
              <tr>
                <td style="width:80px; ">备注</td>
                <td style="vertical-align: middle;">
                    <span class="text-ellipsis" style="display: inline-block;max-width: 450px;height: 30px;line-height: 35px;">{{elmarktip}}</span>
                    <el-tooltip class="box-item" effect="dark" :content="elmarktip" placement="top" style="float: left;"><el-icon style="top:-5px"><QuestionFilled /></el-icon></el-tooltip>
                </td>
              </tr>
              <tr>
                <td style="width:80px; "></td>
                <td>
                <div style="margin-top: 20px;text-align: left;">
                  <el-button v-if="showBtn" type="primary" @click="handleSubmit">立即租箱</el-button>
                </div>
                </td>
              </tr>
              </tbody>
            </table>
          </el-col>
        </el-row>       
      </div>
    </el-card>
    <el-card class="pag-container">
      <h4 style="font-weight: 700;">租箱详情</h4>
      <h5 style="font-weight: 600;">集装箱介绍</h5>

      <el-form inline label-width="60px" style="margin-top: 10px;" label-position="left">
        <el-form-item label="箱型：">{{ DATA_FUC_boxTypeFilter(param.boxType,true) }}</el-form-item>
        <el-form-item label="箱况:">{{ boxConditionFilter(param.boxCondition) }}</el-form-item>
        <el-form-item label="箱使期:">{{ rowData.boxUsagePeriod }} 天</el-form-item>
        <el-form-item label="总重:">{{ param.boxType > 10 ? '30480' : '30480/32500' }} KG</el-form-item>
      </el-form>
      <!-- <div v-for="item in detailFileList" style="width:100%;  ">
        <div v-for="img in item.imgInfo" style="width:100%;text-align: center;">
          <img :src="img.url" style="width:750px;height:auto;margin-top: 10px" />
        </div>
        <div style="box-sizing: border-box;padding: 10px;">{{ item.textVal }}</div>
      </div> -->

      <div v-for="item in detailFileList" style="width:100%;  ">
        <div v-for="img in item.imgInfo" style="width:100%;max-height:500px;overflow: hidden;">
          <img :src="img.url" style="width:100%;height:auto;margin-top: 10px" />
        </div>
        <div style="box-sizing: border-box;padding: 10px;">{{ item.textVal }}</div>
      </div>
    </el-card>



    <!-- dialog -->
    <el-dialog v-model="param.dialogVisible" width="500">
      <el-form :model="param.form">
        <el-form-item label="签署人姓名">
          <el-input v-model="param.form.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="签署人电话">
          <el-input v-model="param.form.code" placeholder="请输入验证码" />
        </el-form-item>
        <el-form-item>
          <div style="background-color: #FFF2E7;padding: 5px;box-sizing: border-box;width: 100%">
            <el-icon style="color: #2158F3;">
              <WarningFilled />
            </el-icon> 请确认签署人是否正确，更改签署人将重新发起签署！<br>
            <a href="#" style="padding-left: 20px;color: #7CAFFF;">E签宝协议签订教程</a>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="param.dialogVisible = false">取消</el-button>
          <el-button @click="handleSign">确认</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="centerDialogVisible" title="提示" width="500" destroy-on-close center>
      <span>
        您还未完成企业实名认证，请您完成企业实名认证后，就可以进行相应业务功能操作啦！
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="goAuthenticate">企业实名认证</el-button>
        </div>
      </template>
      </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { computed, onActivated, reactive, ref } from 'vue';
import  Carousel from '@/components/carousel'
import { useRoute, useRouter } from 'vue-router';
import { getBoxInfo } from '@/api/boxCallBack'
import useUserStore from '@/store/modules/user'
import {DATA_FUC_boxTypeFilter} from '@/data/box.js'
import { ElMessage } from 'element-plus';
const userStore = useUserStore()
const route = useRoute()

// 立即租箱按钮 显示控制
const showBtn = computed(() => {
  const user = userStore.getUser()
  return user.companyId != rowData.value.companyId
})

const imgUrl = computed(() => {
  if(rowData.value.mainFileList){
    return JSON.parse(rowData.value.mainFileList)[0].url
  }
})

const router = useRouter()
const centerDialogVisible=ref(false)

const param = reactive({
  dialogVisible: false,
  boxConditionList: [],
  boxTypeList: [],
  boxType: 5,
  boxCondition: 5,
  num: 0,
  page: 1,
  limit: 10
})
const swiperData = reactive({
  list: [],
  config: {
    width:"100%",
    height:"450px"
  }
})

//可用箱量
const inventory = computed(() => {
  let tagDataList = rowData.value.releaseCallbackPriceList
  let num = 0
  if (!tagDataList) return 0
  tagDataList.forEach((item: any) => {
    if (item.boxType == param.boxType && item.boxCondition == param.boxCondition) {
      num = num + item.inventory
    }
  })
  return num
})
const unitPrice = computed(() => {
  const tagDataList = rowData.value.releaseCallbackPriceList
  let price = 0
  if (!tagDataList) return 0
  tagDataList.forEach((item: any) => {
    if (item.boxType == param.boxType && item.boxCondition == param.boxCondition) {
      price = item.unitPrice
    }
  })
  return price
})

const  eltooltip = computed(() => {
  return  "超期1天，$" + rowData.value.overdueFeeDay  +"/箱/天,超期 " + rowData.value.lossDay + "天仍未还箱，视为灭失，灭失费$" + rowData.value.lossFee
})
const  elmarktip = computed(() => {
  return  rowData.value.remark ? rowData.value.remark : '暂无备注'
})

onActivated(() => {
  getSetBoxInfo()
})

// 获取&&初始化数据
const mainFileList = ref([])
const detailFileList = ref([])
const rowData = ref([])
const getSetBoxInfo = async () => {
    if(!route.query.orderId) return ElMessage.warning('参数错误,请返回上一级并刷新页面')
    await getBoxInfo(route.query.orderId).then((res: any) => {
      const result = res.data
      mainFileList.value = JSON.parse(result.mainFileList)
      swiperData.list = JSON.parse(result.mainFileList)
      detailFileList.value = JSON.parse(result.detailFileList)
      setBoxType(result) // 箱型list
      setboxCondition(result) // 箱况list
      result.carryCityName = formatCity(result.carryCity)
      result.returnCityName = formatCity(result.returnCity)
      rowData.value = result
      param.boxType=result.releaseCallbackPriceList[0].boxType
      param.boxCondition=result.releaseCallbackPriceList[0].boxCondition
      boxTypeChange() // 初始化箱型
    })
}

//
function formatCity(cityList: any) {
  cityList = JSON.parse(cityList);
  let cityName = ''
  cityList.map((item: any, index: number) => {
    cityName = cityName + (index == 0 ? '' : '/') + item.cityName
  })
  return cityName
}

// 
const setBoxType = (result: any) => {
  let arry = []
  param.boxTypeList = []
  result.releaseCallbackPriceList.forEach((el: any) => {
    if (!arry.includes(el.boxType)) {
      param.boxTypeList.push({ value: el.boxType, label: DATA_FUC_boxTypeFilter(el.boxType) })
      arry.push(el.boxType)
    }
  })
}
const setboxCondition = (result: any) => {
  let arry = []
  param.boxConditionList = []
  result.releaseCallbackPriceList.forEach((el: any) => {
    if (!arry.includes(el.boxCondition)) {
      param.boxConditionList.push({ value: el.boxCondition, label: boxConditionFilter(el.boxCondition) })
      arry.push(el.boxCondition)
    }
  })
  param.boxCondition = param.boxConditionList[0].value
}

// 整合可选箱况(根据箱型)+默认值
const getBoxCondition = (result: any, boxType: any) => {
  let arry: any = []
  let list: any = []
  result.releaseCallbackPriceList.forEach((el: any) => {
    if (!arry.includes(el.boxCondition) && el.boxType == boxType) {
      list.push({ value: el.boxCondition, label: boxConditionFilter(el.boxCondition) })
      arry.push(el.boxCondition)
    }
  })
  param.boxCondition = list[0].value //箱况默认
  return list
}
//箱型变更
const boxTypeChange = () => {
  param.boxConditionList = getBoxCondition(rowData.value, param.boxType)
  param.num = 0
}
// 实名认证
const goAuthenticate = () => {
  router.push('/enterpriseManage/realAuthentication')
  centerDialogVisible.value = false
}
//过滤
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

// 提交
const handleSubmit = () => {
  console.log('handleSubmit')
  if(userStore.getUser() && userStore.getUser().examineStatus != '10'){
    centerDialogVisible.value = true
  }else{
    let data = {
      boxType: param.boxType,
      boxCondition: param.boxCondition,
      num: param.num,
      unitPrice: unitPrice.value,
      inventory: inventory.value
    }
     router.push({
      path:'huiDiao',
      query:{
          orderId:rowData.value.id,
          submitData:JSON.stringify(data),
      }
    })
  }
}

// 签署
const handleSign = () => {
  console.log('handleSign')
  router.push('/EQianBao_success')
  param.dialogVisible = false
}
</script>
<style lang="scss" scoped>
.pag-container {
  margin-top: 20px;
  box-sizing: border-box;
  padding: 10px;
}

</style>